/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="container">
			<view class="cover" >
				<!-- <view class="detail">
					<view class="price-text">可用余额</view>
					<view class="price-num">{{filter(userInfo.user_money ||0)}}</view>
				</view>
				<view class="operate">
					<navigator url="/pages/user/recharge/recharge?money=0" role="navigation">
						<view class="op-item">账户充值</view>
					</navigator>
					<navigator url="/pages/user/withdrawals/withdrawals?money=0" role="navigation">
						<view class="op-item">申请提现</view>
					</navigator>
				</view> -->
				<view class="cover-top">
					<view class="detail">
						<view class="price">
							{{filter(userInfo.user_money ||0)}}
						</view>
						<view class="price-text">
							可用余额
						</view>
					</view>
					<view class="detail">
						<view class="price">
							{{filter(survey.able_withdraw_money||0)}}
						</view>
						<view class="price-text">
							可提现
						</view>
					</view>
					<view class="detail">
						<view class="price">
							{{filter(survey.withdrawing_money||0)}}
						</view>
						<view class="price-text">
							提现中
						</view>
					</view>
					<!-- 新功能 -->
					<!-- <view class="detail">
						<view class="price">
							100.00
						</view>
						<view class="price-text">
							累计充值
						</view>
					</view> -->
					<view class="detail">
						<view class="price">
							{{filter(userInfo.distribut_withdrawals_money ||0)}}
						</view>
						<view class="price-text">
							累计提现
						</view>
					</view>
					<view class="detail">
						<view class="price">
							{{filter(userInfo.frozen_money ||0)}}
						</view>
						<view class="price-text">
							冻结余额
						</view>
					</view>
				</view>
				
				<view class="operate">
					<navigator url="/pages/user/recharge/recharge?money=0" role="navigation">
						<view class="op-item">账户充值</view>
					</navigator>
					<navigator :url="'/pages/user/withdrawals/withdrawals?money='+userInfo.user_money" role="navigation">
						<view class="op-item">申请提现</view>
					</navigator>
				</view>
				
			</view>
			<view class="list">
				<!-- <navigator url="/pages/user/account_list/account_list" role="navigation"> -->
					<view class="item " :class="[show==1?'switch-on':'']" data-num="1" @tap="changeItem">
						余额明细
						<!-- <image class="wh100 arrow" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image> -->
					</view>
				<!-- </navigator> -->
				<!-- <navigator url="/pages/user/points_list/points_list" role="navigation">
					<view class="item">
						积分明细
						<image class="wh100 arrow" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image>
					</view>
				</navigator> -->
				<!-- <navigator url="/pages/user/recharge_list/recharge_list" role="navigation"> -->
					<view class="item" :class="[show==2?'switch-on':'']"data-num="2"  @tap="changeItem">
						充值记录
						<!-- <image class="wh100 arrow" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image> -->
					</view>
				<!-- </navigator> -->
				<!-- <navigator url="/pages/user/withdrawals_list/withdrawals_list" role="navigation"> -->
					<view class="item" :class="[show==3?'switch-on':'']" data-num="3"  @tap="changeItem">
						提现记录
						<!-- <image class="wh100 arrow" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image> -->
					</view>
				<!-- </navigator> -->
			</view>
			<!-- 余额明细 -->
			<view v-if="show==1?true:false">
				<view class="navbar">
					<block v-for="(item,index) in navTab" :key="index">
						<view class="navbar-box">
							<view @tap="changeTab" :class="[navindex==item.id?'navbar-item-on':'']" :data-current="item.id" >{{item.item}} </view>
						</view>
					</block>
				</view>
				<view class="top-box">
					<view class="account-item title">描述</view>
					<view class="account-item title">余额增减</view>
					<view class="account-item title">时间</view>
				</view>
				<block v-for="(item,index) in accountList" :key="index" >
					<view class="account-box">
						<view class="account-item">{{item.desc}}</view>
						<view class="account-item price" >{{item.user_money}}</view>
						
						<view class="account-item time">{{item.change_time}}</view>
					</view>
					
				</block>
			</view>
			<!-- 充值记录 -->
			<view v-if="show==2?true:false">
				<view class="recharge-box">
						<view class="recharge-item pay title">支付方式</view>
						<view class="recharge-item time title">日期</view>
						<view class="recharge-item price title">金额</view>
						<view class="recharge-item status title">状态</view>
					
				</view>
				<block v-for="(item,index) in rechargeList" :key="index">
					<view  class="point-box">
						<view class="point-item cont">{{item.pay_name}}</view>
						<view class="point-item time">{{item.ctime}}</view>
						<view class="point-item price">{{item.account}}</view>
						<view class="point-item status">
						  {{item.pay_status==0?'待付款':''}}{{item.pay_status==1?'已支付':''}}{{item.pay_status==2?'支付失败':''}}
						 
						</view>
					</view>
				</block>
				
			</view>
			<!-- 提现记录 -->
			<view v-if="show==3?true:false">
				<view class="withdrawal-box">
					<view class="withdrawal-item pay title">编号</view>
					<view class="withdrawal-item time title">申请日期</view>
					<view class="withdrawal-item price title">金额</view>
					<view class="withdrawal-item status title">状态</view>
				</view>
				<block v-for="(item,index) in withdrawalsList" :key="index">
					<view class="point-box">
						<view class="point-item cont">{{item.id}}</view>
						<view class="point-item time">{{item.create_time}}</view>
						<view class="point-item price">{{filter(item.money)}}</view>
						<view class="point-item status"> 
						    {{item.status==-2?'无效作废':''}}
						    {{item.status==-1?'审核失败':''}}
						    {{item.status==0?'申请中':''}}
						    {{item.status==1?'审核通过':''}}
						    {{item.status==2?'提现完成':''}}
						    {{item.status==3?'转款失败':''}}
						</view>
					</view>
					
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {getAccount,getRecharge,getWithdrawals,getSurvey} from "@/api/api.js";
	import common from "@/common/common.js";
	import {mapState} from 'vuex';
	import config from "@/api/config";
	const globalData=getApp().globalData//从app.vue获取用户信息
	export default {
		data() {
			return {
				userInfo:"",
				imgUrl:config.imgUrl,
				navindex:0,
				show:1,
				navTab:[
					{item:"全部",id:0},
					{item:"赚取",id:1},
					{item:"消费",id:2}
				],
				
				params:{
					// type:0,//0 个人余额 1团队提现
					p:1,
				},
				withdrawalsList:[],//提现记录
				
				rechargeList:[],//充值list
				accountList:[],//明细列表
				survey:"",
				total:"",//数据总数
			};
		},
		onLoad(options){
			if(options.status){ //显示提示状态
				this.show=options.status
			}
		},
		onShow(){
						
			if(this.hasLogin){
				
				this.userInfo=this.user;
				// if(this.userInfo==""){ /*如果用户信息为空就从新获取信息*/
				// 	this.getUserInfo()
				// 	this.getSurvey()
				// }
				
				
			}	
		},
		watch: {
			show:{
				deep:true,
				handler(){
					if(this.show==1){
						this.getAccount(this.params)
					}else if(this.show==2){
						this.getRecharge(this.params)
					}else {
						this.getWithdrawals(this.params)
					}
				}
			}
		},
		computed: {
			...mapState(['user','hasLogin'])
		},
		methods:{
			/*分销提现概况*/
			getSurvey(){
				getSurvey().then(res=>{
					this.survey=res;
					console.log(res)
				})
			},
			/*账号明细*/ 
			getAccount(params){
				getAccount(params).then(res=>{
					console.log(res)
					res.records.forEach((i,index)=>{
						console.log(i)
						var time=common.format(i.change_time,'yyyy-MM-dd hh:mm')
						i.change_time=time
					})
					this.accountList=this.accountList.concat(res.records);
					this.total=res.total;
				})
			},
			/*充值记录*/ 
			getRecharge(params){
				getRecharge(params).then(res=>{
					console.log(res)
					res.records.forEach((i,index)=>{
						console.log(i)
						var time=common.format(i.ctime,'yyyy')
						i.ctime=time
					})
					this.rechargeList=this.rechargeList.concat(res.records);
					this.total=res.total;
				})
			},
			/*提现记录*/ 
			getWithdrawals(params){
				getWithdrawals(params).then(res=>{
					console.log(res)
					res.records.forEach((i,index)=>{
						console.log(i)
						var time=common.format(i.create_time,'yyyy-MM-dd ')
						i.create_time=time
					})
					this.withdrawalsList=this.withdrawalsList.concat(res.records);
					this.total=res.total;
				})
			},
			/*切换*/
			 changeItem(e){
				let index=e.currentTarget.dataset.num 
				this.show=index;
				console.log(this.show)
				if(index==1){
					delete this.params.type;
					this.accountList.length=0;
					// this.getAccount(this.params)
				}
				if(index==2){
					delete this.params.type;
					this.rechargeList.length=0;
					// this.getRecharge(this.params)
				}
				if(index==3){
					this.withdrawalsList.length=0
					this.params.type=0
					// this.getWithdrawals(this.params)
				}
			 },
			/*切换*/
			changeTab(e){
				let index=e.currentTarget.dataset.current;
				this.navindex=index;
				this.accountList.length=0;
				if(this.navindex==1){ //赚取
					this.params.is_increase=1;
				}
				if(this.navindex==2){//消费
					this.params.is_increase=0;
				}
				if(this.navindex==0){//全部
					delete this.params.is_increase;
				}
				this.params.p=1;
				this.getAccount(this.params)
			},
			/*保留两位小数*/
			filter(e) {
				let num = parseFloat(e).toFixed(2)
				return num;
			},
			onReachBottom(){//下拉加载数据				
				if(this.loginInfo!=null){
					if(this.show=="1"){
						if(this.accountList.length===this.total){
							common.toast("none","加载完了",2000)
							 return false;
						}
						this.params.p=1;
						this.params.p++;
						this.getAccount(this.params)
					}
					if(this.show=="2"){
						if(this.rechargeList.length===this.total){
							common.toast("none","加载完了",2000)
							 return false;
						}
						this.params.p=1;
						this.params.p++;
						this.getRecharge(this.params)
					}
					if(this.show=="3"){
						if(this.withdrawalsList.length===this.total){
							common.toast("none","加载完了",2000)
							 return false;
						}
						this.params.type=0;
						this.params.p=1;
						this.params.p++;
						this.getWithdrawals(this.params)
					}
					
				}
				
				
			},
		}
	}
</script>

<style lang="scss">
	/* account.wxss */
	.container{
		padding-bottom: 0;
	}
	.cover {
		background-color: #ff3b3b;
		color: white;
		height: 320rpx;
		text-align: center;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.cover-top{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border-bottom: 2rpx solid #fff;
	}
	.detail {
		width: 250rpx;
		height: 120rpx;
		font-size: 36rpx;
		// margin-top: 150rpx;
		line-height: 60rpx;
	}
	.price{
		font-size: 30rpx;
	}
	.price-text {
		font-size: 22rpx;
	}

	.price-num {
		font-weight: bold;
	}

	.operate {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.op-item {
		width: 50%;
		float: left;
		padding-bottom: 25rpx;
		font-size: 24rpx;
	}

	.list {
		// border-radius: 10rpx;
		
		// width: 710rpx;
		// margin: 0 auto;
		// margin-top: 20rpx;
		// box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	
	.item {
		flex: 1;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 30rpx;
		background-color: #ebebeb;
		
	}
	.switch-on{
			background: #FFFFFF;
			
	}
	.arrow {
		margin-top: 5rpx;
		width: 25rpx;
		height: 28rpx;
		float: right;
	}
	.navbar {
		width: 100%;
	}
	
	.navbar-box {
		font-size: 30rpx;
		display: inline-block;
		width: 33.333333%;
		box-sizing: border-box;
		text-align: center;
		line-height: 85rpx;
	}
	
	.navbar-item-on {
		font-size: 35rpx;
		font-weight: bold;
		position: relative;
		color: #ff3b3b;
	}
	
	.navbar-item-on:after {
		content: '';
		position: absolute;
		width: 40rpx;
		height: 8rpx;
		background: linear-gradient(90deg, rgba(255, 59, 59, 1) 0%, rgba(255, 115, 61, 1) 100%);
		border-radius: 4rpx;
		left: 50%;
		margin-left: -20rpx;
		bottom: 0rpx;
	}
	
	.top-box {
		background: #F0F0F0;
		font-size: 26rpx;
		color: #666666;
		width: 100%;
		padding: 20rpx 0;
		margin-top: 30rpx;
		border-radius: 10rpx;
	}
	
	.account-box {
		width: 100%;
		font-size: 28rpx;
		padding: 20rpx 0;
		border-radius: 10rpx;
	}
	
	.account-box:nth-child(odd) {
		background: #fff;
	}
	
	.account-box:nth-child(even) {
		background: #FAFAFA;
	}
	
	.account-item {
		display: inline-block;
		width: 33.333333%;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
		color: #666;
	}
	
	.account-box .cont {
		color: #808080;
	}
	
	.account-box .price {
		color: #808080;
		text-align: center;
	}
	
	.account-box .time {
		color: #808080;
	}
	
	.account-box .title {
		text-align: center;
	}
	.recharge-box {
			background: #F0F0F0;
			font-size: 26rpx;
			color: #666666;
			width: 100%;
			padding: 20rpx 0;
			border-radius: 10rpx;
		}
	
		.recharge-item {
			display: inline-block;
			width: 25%;
			word-break: keep-all;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: center;
			color: #666;
		}
	
		/* .recharge-box .pay{
	    width: 35%;
	}
	.recharge-box .time{
	    width: 23%;
	}
	.recharge-box .price{
	    width: 20%;
	}
	.recharge-box .status{
	    width: 22%;
	    color: #ff3b3b;
	} */
		.point-box {
			width: 100%;
			font-size: 28rpx;
			padding: 20rpx 0;
			border-radius: 10rpx;
			/* padding-left: 5rpx; */
		}
	
		.point-box:nth-child(odd) {
			background: #fff;
		}
	
		.point-box:nth-child(even) {
			background: #FAFAFA;
		}
	
		.point-item {
			display: inline-block;
			width: 25%;
			word-break: keep-all;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: center;
			color: #666;
		}
	
		.point-box .cont {
			color: #808080;
		}
	
		.point-box .price {
			color: #ff3b3b;
			text-align: center;
		}
	
		.point-box .time {
			color: #808080;
		}
	
		.point-box .status {
			color: #808080;
		}
	
		.point-box .title {
			text-align: center;
		}
		.withdrawal-box{
		    background: #F0F0F0;
		    font-size: 26rpx;
		    color: #666666;
		    width: 100%;
		    padding: 20rpx 0;
		    border-radius: 10rpx;
		}
		.withdrawal-item{
		    display: inline-block; 
		    width: 25%;
		    word-break: keep-all;
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    text-align: center;
		    color: #666;
		}
		/* .withdrawal-box .pay{
		    width: 20%;
		}
		.withdrawal-box .time{
		    width: 27%;
		}
		.withdrawal-box .price{
		    width: 28%;
		}
		.withdrawal-box .status{
		    width: 25%;
		    color: #ff3b3b;
		} */
		/* .withdrawal-box .title{
		    color: #666666;
		    font-size: 32rpx;
		} */
		.point-box{
		    width: 100%;
		    font-size: 28rpx;
		    padding: 20rpx 0;
		    border-radius: 10rpx;
		    /* padding-left: 5rpx; */
		}
		.point-box:nth-child(odd){
		    background: #fff;
		}
		.point-box:nth-child(even){
		    background: #FAFAFA;
		}
		.point-item{
		    display: inline-block; 
		    width: 25%;
		    word-break: keep-all;
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    text-align: center;
		    color: #666;
		}
		.point-box .cont{
		    color: #808080;
		}
		.point-box .price{
		    color: #ff3b3b; 
		    text-align: center;
		}
		.point-box .time{
		    color: #808080;
		}
		.point-box .status{
		    color:  #808080;
		}
		.point-box .title{
		    text-align: center;
		}
</style>
